<template>
  <div class="left-chart-1">
    <div class="lc-details" v-if="lcData">
      <div class="ldd">
        <p>当前时间</p><span>{{nowDate}}</span>
      </div>
      <div class="ldd">
        <p>开机时间</p><span>{{lcData.boot_time}}</span>
      </div>
      <div class="ldd">
        <p>运行时间</p><span>{{lcData.run_time}}</span>
      </div>
      <div class="ldd">
        <p>(上次)关机时间</p><span>{{lcData.last_off_time}}</span>
      </div>
      <div class="ldd">
        <p>(上次)故障时间</p><span>{{lcData.last_fault_time}}</span>
      </div>
      <div class="ldd">
        <p>设备状态：</p>
        <div class="lddd">
          <div class="lc-bg" :style="{background:colors[lcData.work_station_status]}">
            <img v-if="icon" :src="require(`@/assets/img/icon${icon}.png`)" />
            <span>{{statusTxt[lcData.work_station_status]}}</span>
          </div>
        </div>     
      </div>
      <div class="ldd">
        <p>开机时长</p><span>{{lcData.boot_duration}}</span>
      </div>
      <div class="ldd">
        <p>运行时长</p><span>{{lcData.run_duration}}</span>
      </div> 
      <div class="ldd">
        <p>故障时长</p><span>{{lcData.fault_duration}}</span>
      </div>
    </div>
    <dv-decoration-2 style="height:10px;" v-if="lcData" />
  </div>
</template>

<script>
import { stationDetails } from "@/network/home.js";

export default {
  props:{
    stationId: {
      type: Number,
      default: 0
    }
  },
  name: "LeftChart1",
  data() {
    return {
      timer:null,
      nowDate:'',
      colors: ["#00A4E7", "#12A368", "#FF5959", "#ff0000", "#FAE220", "#E69304"],
      statusTxt: ["空闲", "运行", "停止", "急停", "故障", "需要维护"],
      icon:'',
      lcData:{
        // boot_time:'',
        // run_time:'',
        // last_off_time:'',
        // last_fault_time:'',
        // work_station_status:'',
        // boot_duration:'',
        // fault_duration:''
      }
    }
  },
  watch:{
    stationId: function(){
      if(this.stationId > 0 ) this.getlist()
      // if(this.stationId > 0 ) this.getStationDetails()
    }
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.formatDate) clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer);
    console.log("beforeDestroy");
    this.lcData = {};
  },
  destroyed() {
    //清除定时器
    clearInterval(this.timer);
    console.log("destroyed");
    this.lcData = {};
  },
  mounted() {
    this.getStationDetails();
    this.currentTime();
    this.getlist()
  },
  methods: {
    getlist(){
      let num = 0;
      //创建并执行定时器
      this.timer = setInterval(() => {
        this.getStationDetails();
        //当num等于100时清除option 
        if (num % 10 == 0) {
          this.lcData = {};
        }
        num++;
      }, 10000);
    },
    // bindImg(imgName){
    //   console.log('imgname',imgName);
    //   return require("@/assets/img/icon" + imgName + ".png")
    // },
    getStationDetails(){
      stationDetails({stationId:this.stationId}).then((res) => {
        this.lcData = res.data.data
        this.icon = res.data.data && res.data.data.work_station_status
      })
    },    
    currentTime() {
      setInterval(this.formatDate, 500)
    },
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      // let week = date.getDay(); // 星期
      // let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      // this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
    }
  } 
}
</script>

<style lang="less">
.left-chart-1 {
  height: 49%;

  .lc-details {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-bottom: 4%;
    font-size: 18px;
    box-sizing: border-box;   

    .ldd {
      // height: 44px;
      display: flex;
      align-items: center;
      p {
        width: 100%;
        margin: 0;
        text-align: left;
      }
      .lddd{
        width: 100%;
        text-align: left;
        
        .lc-bg{
          display: inline-block;
          padding: 1% 4%;
          vertical-align: middle;
         
          span{
            font-size: 14px;
            vertical-align: middle;
          }
          img{width:22px;vertical-align: middle;}
        }
      }  
      
      span {
        width: 100%;
        font-size: 16px;
        text-align: left;
      }
    }
  }
}
</style>